<template>
    <div>
        <el-dialog :before-close="cancel" center :title="isAdd ? '添加菜单' : '修改菜单'" :visible.sync="isShow">
            <el-form ref="menuForm" :model="menuForm" :rules="rules">
                <el-form-item :label-width="formLabelWidth" label="菜单名称" prop="title">
                    <el-input v-model="menuForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="上级菜单" prop="pid">
                    <el-select @change="changePid" v-model="menuForm.pid" placeholder="请选择上级菜单">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menulist" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="菜单类型">
                    <el-radio disabled v-model="menuForm.type" :label="1">目录</el-radio>
                    <el-radio disabled v-model="menuForm.type" :label="2">菜单</el-radio>
                </el-form-item>
                <el-form-item v-if="menuForm.type==1" :label-width="formLabelWidth" label="菜单图标">
                       <el-select v-model="menuForm.icon">
                    <el-option v-for="item in iconlist" 
                              :key="item"
                              :value="item"
                              :label="item">
                              </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else :label-width="formLabelWidth" label="菜单地址">
                  <el-select  v-model="menuForm.url">
                    <el-option v-for="item in indexRoutes" 
                              :key="item.path"
                              :value="item.path"
                              :label="item.meta.title">
                              </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="状态">
                    <el-switch v-model="menuForm.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2" autocomplete="off"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入辅助性函数
import { mapActions,mapGetters } from 'vuex';
import { menuAdd,menuEdit ,menuInfo} from '../../request/api';
// 引入路由路线
import {indexRoutes} from '../../router'
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            menuForm: {
                pid: 0,//上级分类编号  注意：顶级菜单-0
                title: '',//菜单名称
                icon: '',//图标
                type: 1,//类型 1目录2菜单
                url: '',//菜单地址
                status: 1,//状态   1正常2禁用   number类型
            },
            formLabelWidth: "80px",
            rules: {
                title: [
                    // required必须的 必传项
                    { required: true, message: "请输入菜单名称", trigger: "blur" },
                    { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
                ],
                pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
            },
            indexRoutes:indexRoutes,
            iconlist:['el-icon-eleme','el-icon-user-solid','el-icon-s-operation','el-icon-menu']
        }
    },
    computed:{
        ...mapGetters({
            menulist:"menu/getMenuList"
        })
    },
    methods: {
        // 封装一个切换上级菜单事件
        changePid(){
            this.menuForm.type = this.menuForm.pid==0?1:2
        },
        // 获取一条数据的方法
        lookup(id){
            // console.log(id,'iiii');
            menuInfo({
                id,
            }).then((res)=>{
            console.log(res, "一条数据");
            this.menuForm = res.list
            this.menuForm.id = id
            })
        },
        ...mapActions({
            getMenu:"menu/changeMenuAction"
        }),
        // 点击取消
        cancel() {
            this.$emit('cancel', false);
            // 调用重置事件
            this.reset()
        },
        // 封装一个重置事件
        reset() {
            this.menuForm = {
                pid: 0,//上级分类编号  注意：顶级菜单-0
                title: '',//菜单名称
                icon: '',//图标
                type: 1,//类型 1目录2菜单
                url: '',//菜单地址
                status: 1,//状态   1正常2禁用   number类型
            }
            // 清空验证规则
            // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            this.$refs.menuForm.resetFields();
        },
        // 封装一个确定事件
        comfirm() {
            this.$refs.menuForm.validate(async (flag) => {
                console.log(flag);
                if (flag) {
                    //通过属性isAdd去区分 区分是添加还是编辑
                    if (this.isAdd) {
                        //添加接口
                        let res = await menuAdd(this.menuForm);
                        console.log(res, "添加菜单");
                        if(res.code==200){
                            this.$message.success(res.msg)
                            // 添加成功之后关闭弹框
                            this.cancel()
                            // 重新出发行动
                            this.getMenu();
                        }else{
                            this.$message.error(res.msg)
                        }
                    }else{
                        //调用编辑接口
                        console.log('编辑');
                        let res  = await menuEdit(this.menuForm);
                        console.log(res,'编辑');
                        if(res.code==200){
                            this.$message.success(res.msg)
                            // 添加成功后关闭弹框
                            this.cancel();
                            // 重新触发行动
                            this.getMenu()
                        }else{
                            this.$message.error(res.msg)
                        }
                    }

                } else {
                    console.log('验证失败');
                }
            })
        }
    },
};
</script>

<style scoped>
</style>
